<template>
  <div class="demo-table-expand">
    <el-header>所有餐厅列表</el-header>

    <el-button plain @click="dialogFormVisible = true">
      新增
    </el-button>

    <el-table :data="restaurants" style="width: 100%">
      <el-table-column prop="createdAt" label="日期" width="200"/>
      <el-table-column prop="name" label="名字" width="200"/>
      <el-table-column prop="address" label="地址" width="200"/>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="edit(scope.$index, scope.row)">
            修改
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
          <el-button size="small" type="primary" @click="goToDetail(scope.row.restaurantId)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增餐厅 -->
    <el-dialog title="新增餐厅" v-model="dialogFormVisible">
      <el-form :model="newRestaurant" label-width="100px">
        <el-form-item label="餐馆名称">
          <el-input v-model="newRestaurant.name"></el-input>
        </el-form-item>
        <el-form-item label="餐馆地址">
          <el-input v-model="newRestaurant.address"></el-input>
        </el-form-item>
        <el-form-item label="餐馆评分">
          <el-input v-model="newRestaurant.rating" type="number"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="newRestaurant.createdAt" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddRestaurant">确定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router';
import {getAllRestaurants, addRestaurant, deleteRestaurant} from "@/api/restaurant";
import {onMounted} from "vue";
import {ElMessage} from "element-plus";

const router = useRouter();

const restaurants = ref([
  {
    "restaurantId": 1,
    "name": "第一家餐馆",
    "address": "安师大东门",
    "rating": 3,
    "createdAt": "2024-09-10",
  },
])
onMounted(() => {
  // request.get("/restaurants/all").then((res) => {
  //   console.log("/restaurants/all",res);
  //   restaurants.value = res.data
  // });
  getRestaurants();
});
const newRestaurant = ref({
  name: '',
  address: '',
  rating: null,
  createdAt: null
});
const dialogFormVisible = ref(false);

const getRestaurants = async () => {
  const res = await getAllRestaurants();
  console.log("getRestaurants", res);
  restaurants.value = res.data;
}

function submitAddRestaurant() {
  console.log("submitAddRestaurant", newRestaurant.value);
  addNewRestaurant();
}

const addNewRestaurant = async () => {
  console.log("addRestaurant", newRestaurant.value);
  const response = await addRestaurant(newRestaurant.value);
  console.log("addRestaurant response", response);
  if (response.code === 200) {
    dialogFormVisible.value = false;
    ElMessage.success('餐厅新增成功');
    getRestaurants();
  } else {
    ElMessage.error('餐厅新增失败', response.message);
  }
}


function handleDelete(index: number, row: any) {
  //删除此行数据
  // restaurants.value.splice(index, 1)
  console.log("handleDelete row   ", row, "   index", index);
  deleteRestaurantById(row.restaurantId);
}

const deleteRestaurantById = async (restaurantId: number) => {
  const response = await deleteRestaurant(restaurantId);
  console.log("deleteRestaurantById response", response);
  if (response.code === 200) {
    ElMessage.success('餐厅删除成功');
    getRestaurants();
  } else {
    ElMessage.error('餐厅删除失败', response.message);
  }
}

function goToDetail(restaurantId: number) {
  router.push({name: 'RestaurantDetail', params: {id: restaurantId.toString()}});
}


function edit(index: number, row: any) {
  console.log(index, row)
  //将此行数据修改名称为aaa，地址为bbb
  row.name = "aaa"
  row.address = "bbb"
  console.log(restaurants.value)
}
</script>